<template>
  <div class="student-list">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>权限组管理</span>
      </div>

      <QuerySearch :formConfigurationItem="searchTable" ref="querySearch">
        <!-- 按钮插槽 -->
        <template v-slot:btn="slotProps">
          <div class="btn-box">
            <el-button @click="czData">重置</el-button>
            <el-button type="primary" @click="searchBtn(slotProps.data)">搜索</el-button>
            <el-button type="warning" @click="addqxz('添加权限组')">添加权限组</el-button>
          </div>
        </template>
      </QuerySearch>

      <div class="student-table">
        <QueryTable
          :tableConfiguration="tableConfiguration"
          :displayContent="displayContent"
          :formData="formData"
          ref="queryTable"
          :api="getTableServe"
        >
          <template v-slot:perid="{ scope }">
            <div v-if="scope.row.perid && scope.row.perid.length > 0">
              {{ scope.row.perid[0] }} - {{ scope.row.perid[1] }}
            </div>
          </template>
          <template v-slot:users="{ scope }">
            <div v-if="scope.row.users">
              {{ scope.row.users.length }}
            </div>
          </template>
          <template v-slot:devices="{ scope }">
            <div v-if="scope.row.devices">
              {{ scope.row.devices.length }}
            </div>
          </template>
          <template v-slot:status="{ scope }">
            {{ scope.row.status == 1 ? '下发完成' : scope.row.status == 2 ? '下发中' : '未开始下发' }}
          </template>
          <template v-slot:btn="{ scope }">
            <el-button type="primary" size="mini" @click="addqxz('编辑权限组', scope.row)">编辑</el-button>
            <el-button type="info" size="mini" @click="openDetails(scope.row)">下发详情</el-button>
            <el-button type="danger" size="mini" @click="delData(scope.row._id)">删除</el-button>
          </template>
        </QueryTable>
      </div>
    </el-card>

    <AddQx ref="addQx" @czData="czData" />
    <IssueDetails ref="issueDetails" />
  </div>
</template>

<script>
import QueryTable from '@/components/queryTable/index.vue';
import QuerySearch from '@/components/querySearch/index.vue';

import AddQx from './addQx.vue';
import IssueDetails from './IssueDetails.vue';

import { permissiongrouplist, permissiongroupdel } from '@/api/comment/permission.js';

export default {
  components: {
    QueryTable,
    QuerySearch,
    AddQx,
    IssueDetails
  },
  data() {
    return {
      getTableServe: permissiongrouplist,

      //配置文件
      displayContent: {
        height: '57vh',
        indexFixed: true,
        selectionFixed: true,
        selection: false,
        index: true,
        paginationShow: true
      },
      formData: {}, //传给后端的参数
      tableConfiguration: [
        {
          prop: 'name',
          label: '权限组名称',
          width: '260',
          //   showOverflowTooltip: true,
          align: 'center'
        },
        // {
        //   prop: 'perid',
        //   label: '门禁时间段',
        //   width: '260',
        //   align: 'center',
        //   sockets: true
        // },
        {
          prop: 'users',
          label: '人员数量',
          width: '260',
          align: 'center',
          sockets: true
        },
        {
          prop: 'deviceName',
          label: '权限范围',
          width: '260',
          align: 'center'
        },
        {
          prop: 'devices',
          label: '设备数量',
          width: '260',
          align: 'center',
          sockets: true
        },
        {
          prop: 'status',
          label: '状态',
          width: '260',
          align: 'center',
          sockets: true
        },
        {
          label: '操作',
          prop: 'btn',
          width: '250px',
          align: 'center',
          fixed: 'right',
          sockets: true
        }
      ],
      //搜索列表配置
      searchTable: [
        {
          span: 4,
          type: 'input',
          placeholder: '权限组名称',
          value: 'name'
        },
        {
          span: 4,
          type: 'select',
          placeholder: '同步状态',
          value: 'status',
          // optionsConfig: {
          //   value: 'value', //配置展示主要是后端使用的样式
          //   label: 'value',
          // },
          options: [
            {
              value: '1',
              label: '下发完成'
            },
            {
              value: '2',
              label: '下发中'
            },
            {
              value: '3',
              label: '未开始下发'
            }
          ]
        },
        {
          span: 16,
          type: 'btn'
        }
      ]
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    //搜索按钮
    searchBtn(val) {
      this.formData = { ...this.formData, ...val };
      this.$nextTick(() => {
        this.$refs.queryTable.handleCurrentChange(1);
      });
    },
    //重置
    czData() {
      this.formData = {};

      this.$nextTick(() => {
        this.$refs.querySearch.clearData();
        this.$refs.queryTable.handleCurrentChange(1);
      });
    },

    //添加权限组
    addqxz(name, data) {
      this.$refs.addQx.open(name, data);
    },

    //下发详情
    openDetails(data) {
      this.$refs.issueDetails.open(data);
    },

    //删除
    delData(id) {
      try {
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(async () => {
            let res = await permissiongroupdel({ _id: id });
            this.$message({
              type: 'success',
              message: '删除成功'
            });
            this.czData();
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
      } catch (error) {}
    }
  }
};
</script>

<style lang="scss" scoped>
.student-list {
  width: 100%;

  box-sizing: border-box;
  padding: 10px;

  .student-table {
    margin-top: 15px;
  }

  .btn-box {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
